<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="handleSearch()"
            >查询</el-button
          >
          <el-button type="success" size="mini" @click="handleAdds()"
            >创建房间</el-button
          >
          </el-col
        >
      </el-row>
    </el-card>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="margin-top: 1%"
      empty-text="暂无数据"
    >
      <!-- <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column> -->
      <el-table-column label="id" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.id }}  
        </template>
      </el-table-column>
      <el-table-column label="所属园区-楼宇" align="center" width="160">
        <template slot-scope="scope">
          {{ scope.row.building.park.name }} - {{ scope.row.building.name }}
        </template>
      </el-table-column>
      <el-table-column label="房间名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="面积㎡" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.area }}
        </template>
      </el-table-column>
      <el-table-column label="楼层" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.floor }}
        </template>
      </el-table-column>
      <el-table-column label="性质" align="center" width="80">
        <template slot-scope="scope">
          <!-- 类别 1 寝室 2 写字楼 3 商业 -->
          {{ scope.row.type==1 ? '寝室' : scope.row.type==2 ? '写字楼' : '商业' }}
        </template>
      </el-table-column>
      
      <el-table-column label="租金" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.money }}{{ scope.row.rentType==1?'/元/月':'/元/1m²/月' }}
        </template>
      </el-table-column>

      <el-table-column label="是否满员" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isFullCapacity"
            active-color="#13ce66"
            inactive-color="#ff4949"
            disabled
          >
          </el-switch>          
        </template>
      </el-table-column>

      <el-table-column label="性质" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.nature == 1" size="mini"
            >标间</el-tag
          >
          <el-tag type="danger" v-if="scope.row.nature == 2" size="mini"
            >双人寝室</el-tag
          >
          <el-tag type="success" v-if="scope.row.nature == 3" size="mini"
            >四人寝室</el-tag
          >
          <el-tag type="success" v-if="scope.row.nature == 4" size="mini"
            >商铺</el-tag
          >
          <!-- <el-tag type="success" v-esle size="mini">wu</el-tag>  -->
        </template>
      </el-table-column>

      <el-table-column label="租赁状态" align="center">
        <template slot-scope="scope">          
          <el-tag type="success" v-if="scope.row.isLease" size="mini"
            >已租赁</el-tag
          > 
          <el-tag type="danger" v-if="!scope.row.isLease" size="mini"
            >未租赁</el-tag
          > 

        </template>
      </el-table-column>

      <el-table-column label="是否上架" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isArrive"
            active-color="#13ce66"
            inactive-color="#ff4949"
            disabled
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="是否自用" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isInternal"
            active-color="#13ce66"
            inactive-color="#ff4949"
            disabled
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.createDate | formatYmdHms }}  
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleDetails(scope.row.id)"
            >详情</el-button
          >
          <el-button
            type="success"
            size="mini"
            v-if="!scope.row.isLease"
            @click="handleLease(scope.row.id)"
            >租赁</el-button
          >
          <!-- <el-button type="danger" size="mini">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>

    <!-- 添加信息 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from "@/api/room";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      currentPage4: null,
      dialogVisible: false,

      where: {
        pageSize: 15,
        currentPage: 1,
        data: {
          isInternal: "",
          isArrive: "",
          isLease: "",
          isAirConditioner: "",
          type: "",
          name: "",
          buildingId: "",
          parkId: "",
          isFullCapacity: "",
        },
      },

      form: {},
    };
  },
  created() {     
    this.fetchData(this.where);
  },
  methods: {
    handleSearch(){
      this.fetchData(this.where);
    },
    fetchData(obj) {
      this.listLoading = true;
      getList(obj).then((res) => {
        console.log(res);
        this.$message.success(res.msg);
        this.listLoading = false;
        this.list = res.data;
      });
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    handleDetails(id) {
      console.log("Details");
      window.open(
        this.$router.resolve({ path: "/yuanqu/roomDetails", query: { id: id } })
          .href,
        "_blank"
      );
      //  this.$router.push({ name: 'RoomDetails', params: { id: id } },"_blank")
    },
    handleLease(id) {
      window.open(
        this.$router.resolve({ path: "/yuanqu/addLease", query: { id: id } })
          .href,
        "_blank"
      );
    },
    handleAdd() {
      this.dialogVisible = true;
    },
    handleAdds(){
      window.open(this.$router.resolve({ path: '/yuanqu/addRoom' }).href, '_blank');
    },
    handleClose() {
      this.dialogVisible = false;
    },
    onSubmit() {
      this.$message("submit!");
    },
  },
};
</script>
